<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            position: fixed;
            bottom: 100px;
            right: 50px;
            cursor: pointer;
            display: none;
            border: 1px solid #000;
        }
        div {
            width: 1210px;
            margin: 100px auto;
            text-align: center;
            font: 500 26px/35px "simsun";
            color: red;
        }
    </style>
    <script src="animate.js"></script>
    <script>
        window.onload = function () {
            //需求：被卷去的头部超过100显示小火箭，然后点击小火箭屏幕缓慢移动到最顶端。
            //难点：我们以前是移动盒子，现在是移动屏幕，我们没有学过如何移动屏幕。
            //      技术点：window.scrollTo(x,y);浏览器显示区域跳转到指定的坐标
            //步骤：
            //1.老三步
//             var img = document.getElementsByTagName("img")[0];
//             window.onscroll = function () {
                //被卷去的距离大于200显示小火箭，否则隐藏
                //2.显示隐藏小火箭
//                 if(scroll().top>1000){
//                     img.style.display = "block";
//                 }else{
//                     img.style.display = "none";
//                 }
//                 //每次移动滚动条的时候都给leader赋值，模拟leader获取距离顶部的距离
//                 leader = scroll().top;
//             }
//             //3.缓动跳转到页面最顶端（利用我们的缓动动画）
//             var timer = null;
//             var target = 0; //目标位置
//             var leader = 0; //显示区域自身的位置
//             img.onclick = function () {
//                 //技术点：window.scrollTo(0,0);
//                 //要用定时器，先清定时器
//                 clearInterval(timer);
//                 timer = setInterval(function () {
//                     //获取步长
//                     var step = (target-leader)/10;
//                     //二次处理步长
//                     step = step>0?Math.ceil(step):Math.floor(step);
//                     leader = leader +step;
//                     //显示区域移动
//                     window.scrollTo(0,leader);
//                     //清除定时器
//                     if(leader === 0){
//                         clearInterval(timer);
//                     }
//                 },25);
//             }

			var img = document.getElementsByTagName("img")[0];
			window.onscroll = function(){
				if(scroll().top>1000){
					img.style.display = "block";
				}else{
					img.style.display = "none";
				}
				leader = scroll().top;
			}
			var timer = null;
			var target = 0;
			var leader = 0;
			img.onclick = function(){
				clearInterval(timer);
				timer = setInterval(function(){
					var step = (target-leader)/10;
					step = step>0?Math.ceil(step):Math.floor(step);
					leader = leader+step;
					window.scrollTo(0,leader);
					if(leader === 0){
						clearInterval(timer);
					}
				},25);
			}
        }
    </script>

</head>
<body>
    <img src="images/Top.jpg"/>
    <div>
        我是最顶端.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>
        风吹马尾千条线，雨打羊毛一片毡.....<br>


    </div>
</body>
</html>